<template>
    <div>
      购物车界面
      <el-table :data="tableData" style="width: 100%" :summary-method="getSummaries" show-summary>
        <el-table-column label="选择" align="center" width="100">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked ==1" @change="changeChecked(scope.$index)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="商品图片"  align="center">
          <template slot-scope="scope">
            <img :src='"./static/"+scope.row.productImage' alt="" width="40" height="40">
          </template>
        </el-table-column>
        <el-table-column   prop="productName" label="商品名称" align="center"></el-table-column>
        <el-table-column   label="商品价格" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.salePrice | Money("$")}}</span>
          </template>
        </el-table-column>
        <el-table-column  prop="productNum" label="购买数量" align="center">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.productNum" @change="changeValue(scope.row.productNum,scope.row.productId)" :min="1" label="描述文字"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column  label="总价" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.productNum * scope.row.salePrice | Money("$")}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <i class="el-icon-delete" @click="delGoods(scope.row.productId)"></i>
          </template>
        </el-table-column>
      </el-table>
      <router-link to="/usercenter/shopStep"><el-button type="danger">立即支付</el-button></router-link>
    </div>
</template>

<script>
    export default {
        name: "cartList",
      data() {
        return {
          tableData: [],
          radio:'1',
        }
      },
      methods: {

        handleEdit(index, row) {
          console.log(index, row);
        },
        changeValue(value,id){
          this.$http.post("/api/userCart/changeGoodsNum",{
            "productId":id,
            "productNum":value
          }).then(res=>{
            if( res.data.code != 200){
              this.$message.error("操作失败")
              this.getCartList();
            }
          })
        },
        delGoods(id){
          this.$http.post("/api/userCart/delGoods",{
            "productId":id
          }).then(res=>{
            if(res.data.code == 200){
              this.$message.success("删除成功")
            }else{
              this.$message.error("删除失败")
            }
            this.getCartList();
          })
        },
        getCartList(){
          this.$http.post("/api/userCart").then(res=>{
            if(res.data.code === 200){
              this.tableData=res.data.result;
            }else{
              this.$message.error("发生错误")
            }
          })
        },
        changeChecked(index){
          if(this.tableData[index].checked == 1){
            this.tableData[index].checked =0;
          }else{
            this.tableData[index].checked =1;
          }

          this.$http.post("/api/userCart/changeChecked",{
            "productId":this.tableData[index].productId,
            "checked":this.tableData[index].checked
          }).then(res=>{
            if(res.data.code != 200){
              this.$message.error(res.data.msg);
            }
            this. getCartList();
          })
        },
        getSummaries(param){
          //表尾自定义
          const { columns, data } = param;
          const sums = [];
          let sumNum=0;
          let allPrice=0;
          columns.forEach((column, index) => {
            if (index === 0) {
              sums[index] = '总价';
              return;
            }
            if(index == 4){
              for(let item of data){
                if(item.checked !=0){
                  sumNum+= item.productNum;
                }
              }
              sums[index] = sumNum;
            }
            if(index == 5){
              for(let item of data){
                if(item.checked !=0) {
                  allPrice += item.productNum * parseInt(item.salePrice);
                }
              }
              sums[index] = allPrice;
            }

          });
          return sums;
        }
      },
      mounted(){
        this.getCartList();
      }
    }
</script>

<style scoped>

</style>
